import React, { useState } from 'react';
import { Button, Text, TextInput, View, StyleSheet, Pressable } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import Icon from 'react-native-vector-icons/FontAwesome';
const PostScreen = () => {
  const [selectedBoard, setSelectedBoard] = useState('');
  const [postText, setPostText] = useState('');
  const tags = ['#体测', '#二手书', '#电瓶车', '#管理学', '#出书', '#豆腐', '#热搜1'];
  const handlePost = () => {
    // 在这里处理发布逻辑
    console.log('发布的板块: ', selectedBoard);
    console.log('发布的正文: ', postText);
  };

  const handleAddMedia = () => {
    // 在这里处理添加图片和视频的逻辑
    console.log('添加图片和视频');
  };

  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.hotIcon}>热搜</Text>
        {tags.map((tag, index) => (
          <View key={index} style={styles.tag}>
            <Text style={styles.tagText}>{tag}</Text>
          </View>
        ))}
      </View>
      <View style={styles.sectionText}>
        <Pressable onPress={() => navigation.navigate('Chooseplate')}>
          <View style={styles.sectionTextTop}>
            <Icon name="bars" style={styles.sectionTextTopIcon} size={20} color="#BABABA" />
            <Text style={styles.sectionTextTopTitle}>选择板块</Text>
            <Text style={styles.sectionTextTopTag}>{">"}</Text>
          </View>
          <View style={styles.sectionTextBottom}>
            <Text style={styles.sectionTextBottomContent}>选择板块说明</Text>
          </View>
        </Pressable>
      </View>
      <View style={styles.content}>

      </View>
      <Picker
        selectedValue={selectedBoard}
        onValueChange={(itemValue) => setSelectedBoard(itemValue)}
      >
        <Picker.Item label="选择板块" value="" />
        <Picker.Item label="板块1" value="board1" />
        <Picker.Item label="板块2" value="board2" />
      </Picker>

      <TextInput
        multiline
        placeholder="在这里输入正文..."
        onChangeText={(text) => setPostText(text)}
        value={postText}
      />

      <Button title="添加图片/视频" onPress={handleAddMedia} color="#EB7A76" />

      <Button title="发布" onPress={handlePost} color="#EB7A76" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    height: 30,
    marginBottom: 10,
    marginTop: 5,
    overflowY: 'hidden',
    overflowX: 'auto',
  },
  sectionText: {
    flexDirection: 'column',
    height: 100,
    backgroundColor: '#fff',
    borderBottomWidth: 2,
    borderBottomColor: '#F4F4F4',
  },
  sectionTextTop: {
    flexDirection: 'row',
    height: 50,
    backgroundColor: '#fff',
  },
  sectionTextTopIcon: {
    marginTop: 17,
    marginLeft: 10,
  },
  sectionTextTopTitle: {
    color: '#000',
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 10,
    marginTop: 15,
  },
  sectionTextTopTag: {
    color: '#BABABA',
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 15,
    marginRight: 20,
    marginLeft: 'auto',
  },
  sectionTextBottom: {
    height: 48,
    backgroundColor: '#fff',
  },
  sectionTextBottomContent: {
    color: '#BABABA',
    fontSize: 15,
    marginLeft: 10,
    marginTop: 10,
  },
  content: {
    height: 250,
    backgroundColor: '#fff'
  },
  hotIcon: {
    width: 20,
    height: 35,
    marginRight: 10,
    backgroundColor: 'red',
    color: '#fff',
    padding: 5,
    textAlign: 'center',
    fontWeight: 'bold',
    alignItems: 'center',
    fontSize: 10,
    fontWeight: 'bold',
  },
  tag: {
    backgroundColor: '#fff',
    borderRadius: 0,
    paddingHorizontal: 10,
    margin: 5,
  },
  tagText: {
    color: '#000',
  },
  blank: {
    height: 5,
    backgroundColor: '#F4F4F4',
  },
});

export default PostScreen;
